<template>
  <h1>ref</h1>

  <!-- ref获取DOM -->
  <!-- <input type="text" value="123456" ref="inputRef"> -->

  {{ arr }}
  <button @click="change">点击修改</button>
</template>

<script setup lang="ts">
import { ref, type Ref, onMounted, shallowRef,triggerRef, unref } from "vue";

// 1.类型推论
let num = ref(10);

// 2.引入Ref类型进行约束，不推荐
let num1: Ref<number> = ref(20);
// let num2:Ref<number>=ref("20");

// 3.函数泛型约束，推荐
let num3 = ref<number>(30);
// let num4=ref<number>("30");

// console.log(num);
// console.log(num1);
// console.log(num3);
// num3.value=99;

// 4.ref获取DOM
let inputRef = ref<null | HTMLInputElement>(null);
// DOM中的每一个元素在ts里面都有一个自己的类型
onMounted(() => {
  // 断言inputRef.value值不为null
  // console.log(inputRef.value!.value);
  console.log(inputRef.value?.value);
});

// ?. :可选链操作符，允许读取位于连接对象深处的属性的值，
// 而不必明确验证链中的每个引用是否有效
// 在引用null或者undefined的情况下不会引起错误
// let a={b:"666"};
// console.log(a.b);//666
// console.log(a.b.c);//undefined
// console.log(undefined?.d);//undefined
// console.log(null?.x);//undefined

// ?? :空值合并操作符，当操作符左边的操作数为null或者undefined时，
// 返回其右边的操作数，否则返回其左边的操作数
// console.log(null ?? "hello");//"hello"
// console.log(undefined ?? "hello");//"hello"
// console.log("123" ?? "hello");//"123"
// console.log("123" ?? undefined);//"123"
// console.log(false ?? "666");//false

// 5.shallowRef:浅ref
// shallowRef定义的复杂数据类型是可以完全重新赋值，并且做到响应式
// 但是深层次的修改数据，数据可以修改，但是不能做到响应式

// 如果要单独修改深层属性，需要配合triggerRef
// 让数据改变监听，从而修改视图，让数据再次做到响应式
type ArrT = [number, string, boolean];
// 函数泛型约束
let arr = shallowRef<ArrT>([1, "qwe", true]);

let change = () => {
  //   arr.value = [12, "xyz", false];
  arr.value[1] = "abc";
  console.log(arr.value);
  triggerRef(arr);
};

// 6.unref:获取由ref定义的数据的原始数据类型
console.log(num3);
let originalNum3=unref(num3);
console.log(originalNum3);
let originalArr=unref(arr);
console.log(originalArr);
</script>

<style scoped></style>
